<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<table id="demo" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  </div>
</script>

	<script type="text/html" id="toolbarDemo2">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
  </div>
</script>
	<div id="addDiv" style="display: none">
		<!-- 添加表单 -->
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<input type="text" name="imageName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<input type="text" name="paixu" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<input type="text" name="dizhi" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test1">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="show" width="100" src=""> <input type="text"
						name="imag" id="imag" required lay-verify="required"
						placeholder="请输入" autocomplete="off"
						class="layui-input layui-disabled"">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改表单 -->
	<div id="updateDiv" style="display: none">
		<form class="layui-form" action="" lay-filter="updateForm">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<input type="text" name="imagId" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<input type="text" name="paixu" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<input type="text" name="dizhi" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-inline">
					<input type="text" name="imageName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test2">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<img id="show2" width="100" src=""> <input type="text"
						name="imag" id="imag2" required lay-verify="required"
						placeholder="请输入" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;
			//第一个实例
			table.render({
				elem : '#demo',
				url : 'BannerServletAdmian?method=getList' //数据接口
				,
				id : "idTest",
				toolbar : '#toolbarDemo',
				page : true //开启分页
				,
				cols : [ [ //表头
				{
					field : 'imagId',
					title : '用户名',
					width : 180
				}, {
					field : 'imageName',
					title : '标题',
					width : 180,

				}, {
					field : 'dizhi',
					title : '地址',
					width : 180,

				}, {
					field : 'paixu',
					title : '排序',
					width : 180,

				}, {
					field : 'imag',
					title : '照片地址',
					width : 180,
					templet : function(d) {
						return '<img src="../'+d.imag+'"/>'
					}
				}, {
					title : '标题',
					width : 180,
					toolbar : '#toolbarDemo2',
				}

				] ]
			});//表格渲染结束
			//头部监听事件
			table.on('toolbar(test)', function(obj) {
				if (obj.event == "add") {
					layer.open({
						type : 1,
						content : $('#addDiv')
					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				}
			});
			//行内监听事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;//当前行的数据
				switch (obj.event) {

				case 'delete':
					layer.confirm('真的要删除吗', function(index) {
						obj.del();
						layer.close(index);
						$.post("BannerServletAdmian?method=deletlunbo", {
							"imagId" : data.imagId
						}, function(res) {
							layer.msg(res.msg);

						}, "json")

					});
					break;
				case 'update':
					layer.open({
						type : 1,
						content : $("#updateDiv")
					});
					//数据回显
					form.val("updateForm", data);
					$("#show2").attr("src", "../" + data.imag);
					break;
				}

			});
			//表单监听提交添加
			form.on('submit(formDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("BannerServletAdmian?method=insertlunbo", data.field,
						function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭窗口
									table.reload('idTest', {});//重新载入
								})

							}
						}, "json")

				return false;
			});
			//修改
			form.on('submit(formDemo2)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("BannerServletAdmian?method=updatelunbo", data.field,
						function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭窗口
									table.reload('idTest', {});//重新载入
								})

							}
						}, "json")

				return false;
			});
			//执行实例添加
			var uploadInst = upload.render({
				elem : '#test1' //绑定元素
				,
				url : 'ImgServlet?method=imgUpload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#show").attr("src", "../images/" + res.data);
						$("#imag").val("images/" + res.data)
					}
				}
			});
			var uploadInst = upload.render({
				elem : '#test2' //绑定元素
				,
				url : 'ImgServlet?method=imgUpload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					console.log(res);
					if (res.code == 0) {
						$("#show2").attr("src", "../images/" + res.data);
						$("#imag2").val("images/" + res.data)
					}
				}
			});
		})
	</script>
</body>
</html>